<template>
  <div class="box">
    <!-- <navBar :navBar="navBar"></navBar> -->
    <div class="content">
      <!-- <div class="emailBox">{{ $t("register.邮箱注册") }}</div> -->
      <div class="loginBox">
        <div class="itemBox">
          <!-- <img src="../../assets/images/email.png" alt="" /> -->
		  <div>用户名</div>
          <input
            type="text"
            v-model="form.email"
            placeholder="请填写您的用户名"
            @blur="recover"
          />
        </div>
         <div class="innerBox">
          <div class="itemBox">
            <!-- <img src="../../assets/images/code.png" alt="=" /> -->
			<div>手机号</div>
            <input
              type="text"
              v-model="form.phones"
              placeholder="请填写您的手机号"
			  @blur="recover"
            />
            <!-- <span v-show="!isShowCode" @click="getCode">{{
              $t("获取验证码")
            }}</span>
            <span v-show="isShowCode">{{ count }}s</span> -->
          </div>
        </div> 
        <div class="itemBox">
          <!-- <img src="../../assets/images/pass.png" alt="=" /> -->
		  <div>姓名</div>
          <input
            type="text"
            v-model="form.realname"
            placeholder="请填写您的姓名"
            @blur="recover"
          />
          <!-- <img
            v-show="seeShow01"
            src="../../assets/images/see.png"
            @click="seeShowFunc01"
            alt=""
          />
          <img
            v-show="!seeShow01"
            src="../../assets/images/no_see.png"
            @click="seeShowFunc01"
            alt=""
          /> -->
        </div>
        <div class="itemBox">
          <!-- <img src="../../assets/images/pass.png" alt="=" /> -->
		  <div>身份证号</div>
          <input
            type="text"
            v-model="form.cardno"
            placeholder="请填写您的身份证号"
            @blur="recover"
          />
          <!-- <img
            v-show="seeShow02"
            src="../../assets/images/see.png"
            @click="seeShowFunc02"
            alt=""
          />
          <img
            v-show="!seeShow02"
            src="../../assets/images/no_see.png"
            @click="seeShowFunc02"
            alt=""
          /> -->
        </div>
        <div class="itemBox">
          <!-- <img src="../../assets/images/invite.png" alt="=" /> -->
		  <div>登录密码</div>
          <input
            type="text"
            v-model="form.pwd"
            placeholder="登录密码"
            @blur="recover"
          />
        </div>
		<div class="itemBox">
		  <!-- <img src="../../assets/images/invite.png" alt="=" /> -->
		  <div>确认密码</div>
		  <input
		    type="text"
		    v-model="form.npwd"
		    placeholder="再次输入登录密码"
		    @blur="recover"
		  />
		</div>
		<div class="itemBox">
		  <!-- <img src="../../assets/images/invite.png" alt="=" /> -->
		  <div>支付密码</div>
		  <input
		    type="text"
		    v-model="form.pay_pwd"
		    placeholder="支付密码"
		    @blur="recover"
		  />
		</div>
		<div class="itemBox">
		  <!-- <img src="../../assets/images/invite.png" alt="=" /> -->
		  <div>确认密码</div>
		  <input
		    type="text"
		    v-model="form.npay_pwd"
		    placeholder="再次输入支付密码"
		    @blur="recover"
		  />
		</div>
      </div>
      <div class="loginBtn btn">
        <van-button
          block
          type="info"
          :loading-text="$t('注册中') + '...'"
          :loading="loading"
          @click="register"
          >{{ $t("login.立即注册") }}</van-button
        >
      </div>
      <div class="btn1">
		  <div @click="goLogin">已有账户 <span style="color: #f8e16d;">直接登录</span></div>
        <!-- <van-button block type="default" @click="goLogin">{{
          $t("login.登录")
        }}</van-button> -->
      </div>
    </div>
    <!-- <div class="serviceBox" @click="goService">
      <img src="../../assets/images/kf.png" alt="客服" />
    </div> -->
  </div>
</template>
<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "register",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("login.立即注册"),
        close: false,
        btn: "",
      },
      form: {
        email: "",
       // emailCode: "",
        pwd: "",
		npwd: "",
		pay_pwd: "",
		npay_pwd: "",
        phones: "",
        sid: "",
        cardno: "",
        realname: "",
      },
      seeText01: "password",
      seeText02: "password",
      seeShow01: false,
      seeShow02: false,
      count: 59,
      countTimeId: null,
      loading: false,
      isShowCode: false,
    };
  },
  mounted() {
  	  var sno = this.$route.query.sno;
  	  this.form.sid = sno;
  },
  methods: {
    recover() {
      let agentValue = navigator.userAgent;
      // userAgent属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值，用于判断是Android设备还是IOS设备
      let isIOS = !!agentValue.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否是ios终端
      if (isIOS) {
        window.scrollTo(0, 0); // 如果是ios终端，则在失焦的时候使页面返回顶部
      }
    },
    // 获取邮箱验证码
    getCode() {
      if (this.form.email) {
        let data = {
          email: this.form.email,
        };
        $postAxios(api.sendMail, data, (res) => {
          if (res.code == 0) {
            this.$toast(this.$t(res.msg));
            this.isShowCode = true;
            this.getTimer();
			
			
          } else {
            this.$toast(this.$t(res.msg));
          }
        });
      } else {
        this.$toast(this.$t('请输入邮箱地址'));
      }
    },
    // 计时器
    getTimer() {
      if (this.countTimeId) {
        clearInterval(this.countTimeId);
      } else {
        this.countTimeId = setInterval(() => {
          if (this.count > 0) {
            this.count--;
          } else {
            this.count = 59;
            this.isShowCode = false;
            clearInterval(this.countTimeId);
            this.countTimeId = null;
          }
        }, 1000);
      }
    },
    // 跳转登录
    goLogin() {
      this.$router.push({ path: "/login" });
    },
    // 显示密码
    seeShowFunc01() {
      this.seeShow01 = !this.seeShow01;
      if (this.seeShow01) {
        this.seeText01 = "text";
      } else {
        this.seeText01 = "password";
      }
    },
    // 显示密码
    seeShowFunc02() {
      this.seeShow02 = !this.seeShow02;
      if (this.seeShow02) {
        this.seeText02 = "text";
      } else {
        this.seeText02 = "password";
      }
    },
    // 注册
    register() {
      if (this.form.pwd != this.form.npwd) {
        this.$toast(this.$t('两次密码输入不一致'));
        return false;
      }
	  if (this.form.pay_pwd != this.form.npay_pwd) {
	    this.$toast(this.$t('两次密码输入不一致'));
	    return false;
	  }
      for (const key in this.form) {
        if (key != "sid" && !this.form[key]) {
          this.$toast(this.$t('请将注册信息填写完整'));
          return false;
        }
      }
      this.loading = true;
	  var that = this;
      $postAxios(api.register, this.form, (res) => {
        if (res.code == 0) {
          this.$toast(this.$t('注册成功'));
		  var form2 = {
		    email: this.form.email,
		    pwd: this.form.pwd,
		  }
			that.zhuceToLogin(form2);
          setTimeout(() => {
			  
            this.$router.push({ path: "/login" });
          }, 600);
        } else {
          this.$toast(this.$t(res.msg));
        }
        this.loading = false;
      });
    },
	zhuceToLogin( form2){
		$postAxios (api.login, form2, (res)=>{
					  
		} )
	},
    // 联系客服
    goService() {
      this.$router.push({ path: "/onlineService" });
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  position: absolute;
  left: 0px;
  top: 0;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  background-color: #21212b;
  overflow-y: scroll;
  .content {
	  width: 100%;
    padding: 30px 20px;
	box-sizing: border-box;
    .emailBox {
      margin: 0 auto 11px;
      padding: 8px 0;
      width: 112px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      border-radius: 6px;
      background-color: #3489f8;
    }
    .loginBox {
      margin-bottom: 22px;
      .itemBox {
        margin-bottom: 22px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #333;
        width: 100%;
        box-sizing: border-box;
        &:last-child {
          margin-bottom: 0;
        }
        div {
          color: #fff;
          font-size: 14px;
          flex: 0 0 60px;
          padding: 15px 30px 15px 15px;
        }
        input {
			display: block;
			border: none;
			flex: 1;
			font-size: 15px;
			color: #fff;
			background-color: transparent;
        }
      }
      .innerBox {
        margin-bottom: 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .itemBox {
          width: 100%;
        }
        span {
          position: absolute;
          right: 8px;
          top: 10px;
          color: #559aff;
          font-size: 12px;
        }
      }
    }
    .btn {
      button {
        height: 46px;
          background-color: #f8e16d;
          border: 0;
          color: #000;
        font-size: 18px;
        border-radius: 4px;
      }
    }
    .btn1{
    	margin: 30px 0;
    	text-align: center;
    	color: #fff;
    	font-size: 14px;
    }
  }
  .serviceBox {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 15px;
    bottom: 45px;
    background-color: #fff;
    img {
      display: block;
    }
  }
}
</style>